<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>咖啡设计图（首页）</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/index.css">

    <link rel="stylesheet" href="../font/iconfont.css">

    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=kLcxYZVbPx7IyAGDZbEzHYvkv63hIpzb"></script>
    <script type="text/javascript"
        src="//api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
    <link rel="stylesheet" href="//api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
    <title>带检索功能的信息窗口</title>

<body>
    <!-- 头部 -->
    <div id="header">
        <div class="wrapper">
            <img src="../images/sy_02.png" alt="">
            <ul>
                <li><a href="../html/index.html">首页</a></li>
                <li><a href="../html/about_us.html">关于我们</a></li>
                <li><a href="../html/product_display.html">产品介绍</a></li>
                <li><a href="../html/about_team.html">我们团队</a></li>
                <li><a href="../html/contact_us.html">联系我们</a></li>
            </ul>
        </div>
    </div>

    <!-- 轮播 -->
    <div id="banner">
        <div class="banner_img">
            <img src="../images/sy_04.png" alt="">
            <img src="../images/gywm01.png" alt="">
            <img src="../images/cpjs01.png" alt="">
            <img src="../images/tuandui01.png" alt="">
            <img src="../images/lxwm_02.png" alt="">
        </div>
        <button>
            << /button>
                <button>></button>
                <ul>
                    <li hh="0" class="active"></li>
                    <li hh="1"></li>
                    <li hh="2"></li>
                    <li hh="3"></li>
                    <li hh="4"></li>
                </ul>
    </div>

    <!-- 内容 -->
    <div id="content">
        <div class="content_up">
            <div class="title">
                <dl>
                    <dt>关于我们</dt>
                    <dd>About Us</dd>
                    <i class="iconfont">&#xe666;</i>
                </dl>
            </div>
            <div class="content_up_text">
                <img src="../images/sy_07.png" alt="">
                <div class="introduce">
                    <h1>公司介绍</h1>
                    <p>二十世纪三十年代，巴西咖啡豆生产过剩， 剩余的咖啡豆只能当燃料消耗，非常可惜。 当巴
                        西政府向雀巢公司寻求咖啡豆过剩的解决方法的时候 ， 并没有意识到这最终成就了一个历久弥醇
                        的伟大的咖啡品牌。 1930年，巴西咖啡连续经历了几次大丰收，短期内难以完全销售，便向雀巢
                        求助， 求令咖啡不失香醇的长 期保存方式。 咖啡权威——马克思•莫根特尔(Max Morgenthal
                        er)立刻同他的研究 队伍着手研究，试图制造一种既可以较好保存咖啡芳香又易溶于热水的"固体咖
                        啡"。经过在雀巢瑞士实验室长达七年的不懈努力，30年代末，雀巢向市场推出速溶咖啡，“雀巢
                        咖啡”品牌创立。</p>
                    <p>1988年，雀巢通过考察确定云南适宜种植咖啡，决定支持云南省的咖啡种植。随后于1992年
                        在云南思茅地区成立咖啡农艺服务部，帮助当地发展咖啡种植业。 1997年， 雀巢公司在西双版纳
                        创建试验示范农场，从零开始，让农民得到方方面面的实际培训，大大促进了当地小粒种咖啡豆的
                        发展，并使一个产量低、质量次的咖啡豆产地发展成一个产量高、质量优且已引起全球咖啡界关注
                        的咖啡豆产地。雀巢不仅让农民通过种植咖啡获得了稳定的收入,当地农民通过向雀巢了解国际现货
                        市场价格甚至自己上网查询交易网站的价格，学会根据波动分析销售咖啡的时机。
                    </p>
                </div>
            </div>
        </div>
        <div class="content_center">
            <img src="../images/sy_10.png" alt="">
        </div>
        <div class="content_donw">
            <div class="product_presentation">
                <div class="title">
                    <dl>
                        <dt>产品介绍</dt>
                        <dd>Product</dd>
                        <i class="iconfont">&#xe666;</i>
                    </dl>
                </div>
                <div class="content_down_text">
                    <figure>
                        <img src="../images/sy_13.png" alt="">
                        <i class="iconfont">&#xe603;</i>
                        <figcaption>拿铁咖啡</figcaption>
                        <figcaption>拿铁咖啡是意大利浓缩咖啡(Espresso)与牛奶的经典
                            混合，意大利人也很喜欢把拿铁作为早餐的饮料，带
                            来让人难以忘怀的味道
                        </figcaption>
                    </figure>
                    <figure>
                        <img src="../images/sy_15.png" alt="">
                        <i class="iconfont">&#xe603;</i>
                        <figcaption>卡布基诺</figcaption>
                        <figcaption>卡布奇诺是一种加入以同量的意大利特浓咖啡和蒸 汽泡沫牛奶相混合的意大利咖啡。象卡布奇诺教会 的修士头巾一样，咖啡因此得名</figcaption>
                    </figure>
                    <figure>
                        <img src="../images/sy_17.png" alt="">
                        <i class="iconfont">&#xe603;</i>
                        <figcaption>摩卡咖啡</figcaption>
                        <figcaption>摩卡咖啡(CafeMocha)是一种最古老的咖啡，其历 史要追溯到咖啡的起源。它是浓缩咖啡、鲜奶油和 牛奶混合而成，摩卡得名于有名的摩卡港
                        </figcaption>
                    </figure>
                </div>
            </div>
            <div class="team">
                <div class="title">
                    <dl>
                        <dt>公司团队</dt>
                        <dd>Our team</dd>
                        <i class="iconfont">&#xe666;</i>
                    </dl>
                </div>
                <div class="team_text">
                    <figure>
                        <img src="../images/sy_23.png" alt="">
                        <div class="figcap">
                            <div class="figcap_text">
                                <figcaption>贾斯汀.比伯</figcaption>
                                <figcaption>Charlie Put</figcaption>
                            </div>
                            <div class="text_figcap">
                                <figcaption>贾斯汀.比伯</figcaption>
                                <figcaption>贾斯汀出生于1994年3月1日的加 拿大安大略省伦敦的圣若...</figcaption>
                            </div>
                        </div>
                    </figure>
                    <figure>
                        <img src="../images/sy_25.png" alt="">
                        <div class="figcap">
                            <div class="figcap_text">
                                <figcaption>查理·普斯</figcaption>
                                <figcaption>Charlie Putht</figcaption>
                            </div>
                            <div class="text_figcap">
                                <figcaption>贾斯汀.比伯</figcaption>
                                <figcaption>贾斯汀出生于1994年3月1日的加 拿大安大略省伦敦的圣若...</figcaption>
                            </div>
                        </div>
                    </figure>
                    <figure>
                        <img src="../images/sy_27.png" alt="">
                        <div class="figcap">
                            <div class="figcap_text">
                                <figcaption>艾薇儿.拉维尼</figcaption>
                                <figcaption>Avril Lavigne</figcaption>
                            </div>
                            <div class="text_figcap">
                                <figcaption>贾斯汀.比伯</figcaption>
                                <figcaption>贾斯汀出生于1994年3月1日的加 拿大安大略省伦敦的圣若...</figcaption>
                            </div>
                        </div>
                    </figure>
                    <figure>
                        <img src="../images/sy_29.png" alt="">
                        <div class="figcap">
                            <div class="figcap_text">
                                <figcaption>泰勒·斯威夫特</figcaption>
                                <figcaption>Taylor Swift</figcaption>
                            </div>
                            <div class="text_figcap">
                                <figcaption>贾斯汀.比伯</figcaption>
                                <figcaption>贾斯汀出生于1994年3月1日的加 拿大安大略省伦敦的圣若...</figcaption>
                            </div>
                        </div>
                    </figure>
                </div>
            </div>
            <div class="contact_us">
                <div class="title">
                    <dl>
                        <dt>联系我们</dt>
                        <dd>Contact us</dd>
                        <i class="iconfont">&#xe666;</i>
                    </dl>
                </div>
                <div class="us_contact">
                    <div id="allmap"></div>
                    <div class="us_contact_all">
                        <div class="us_contact_introlduce">
                            <i class="iconfont">&#xe660;</i>
                            <figure>
                                <h2>咨询热线</h2>
                                <figcaption>Information Hotline</figcaption>
                                <figcaption>重庆：+86 023-867-7848</figcaption>
                                <figcaption>（09:30~18:30 北京时间）</figcaption>
                            </figure>
                        </div>
                        <div class="us_contact_introlduce">
                            <i class="iconfont">&#xe632;</i>
                            <figure>
                                <h2>公司地址</h2>
                                <figcaption>Company address</figcaption>
                                <figcaption>地址：重庆大坪龙湖时代天街3号写字楼2407室</figcaption>
                                <figcaption>（09:30~18:30 北京时间）</figcaption>
                            </figure>
                        </div>
                        <div class="us_contact_introlduce">
                            <i class="iconfont">&#xe678;</i>
                            <figure>
                                <h2>公司邮箱</h2>
                                <figcaption>E-mail </figcaption>
                                <figcaption>邮箱：info@haitouglobal.com</figcaption>
                                <figcaption>（09:30~18:30 北京时间）</figcaption>
                            </figure>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <!--底部 -->
    <div id="footer">
        <div class="wrapper">
            <p>COPYRIGHT &copy; 重庆DUZU有限公司 | DUZU备案号 33010602001878 号 版权所有：重庆戈登有限公司</p>
            <figure>
                <img src="../images/sy_40.png" alt="">
                <figcaption>官方唯一旗舰店</figcaption>
            </figure>
        </div>
    </div>

    <script type="text/javascript">
        // 百度地图API功能
        var map = new BMap.Map('allmap');
        var poi = new BMap.Point(106.491281, 29.537841);
        map.centerAndZoom(poi, 18);
        map.enableScrollWheelZoom();

        var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
            '<img src="../images/摩卡_02.png" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
            '地址：重庆市九龙坡区渝州路街道科员一路大西洋国际大厦12楼12-1<br/>简介：这是一家非常牛皮的程序员培训机构，欢迎大家来！！！！' +
            '</div>';

        //创建检索信息窗口对象
        var searchInfoWindow = null;
        searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
            title: "重庆千峰教育",      //标题
            width: 290,             //宽度
            height: 125,              //高度
            panel: "panel",         //检索结果面板
            enableAutoPan: true,     //自动平移
            searchTypes: [
                BMAPLIB_TAB_SEARCH,   //周边检索
                BMAPLIB_TAB_TO_HERE,  //到这里去
                BMAPLIB_TAB_FROM_HERE //从这里出发
            ]
        });
        var marker = new BMap.Marker(poi); //创建marker对象

        marker.addEventListener("click", function (e) {
            searchInfoWindow.open(marker);
        })
        map.addOverlay(marker); //在地图中添加marker

        //	map.addTileLayer(new BMap.PanoramaCoverageLayer());

        var stCtrl = new BMap.PanoramaControl(); //构造全景控件
        stCtrl.setOffset(new BMap.Size(20, 20));
        map.addControl(stCtrl);//添加全景控件





        // 产品介绍
        // var product_presentation = document.getElementsByClassName("product_presentation")[0]
        // var content_down_text = document.getElementsByClassName("content_down_text")[0]
        // var arr = [
        //     { "src": "../images/首页_13.png", "title": "拿铁咖啡", "content": "拿铁咖啡是意大利浓缩咖啡(Espresso)与牛奶的经典混合，意大利人也很喜欢把拿铁作为早餐的饮料，带来让人难以忘怀的味道" },
        //     { "src": "../images/首页_15.png", "title": "拿铁咖啡", "content": "拿铁咖啡是意大利浓缩咖啡(Espresso)与牛奶的经典混合，意大利人也很喜欢把拿铁作为早餐的饮料，带来让人难以忘怀的味道" },
        //     { "src": "../images/首页_17.png", "title": "拿铁咖啡", "content": "拿铁咖啡是意大利浓缩咖啡(Espresso)与牛奶的经典混合，意大利人也很喜欢把拿铁作为早餐的饮料，带来让人难以忘怀的味道" },
        // ]
        // for (var i = 0; i < arr.length; i++) {
        //     // var content_down_text = document.createElement("div")
        //     // content_down_text.className="content_down_text"

        //     var figure = document.createElement("figure")
        //     console.log(1);

        //     var img = document.createElement("img")
        //     img.src = arr[i].src

        //     var iconfont = document.createElement("i")
        //     iconfont.className = "iconfont"
        //     iconfont.innerHTML = "&#xe603;"

        //     var figcaption1 = document.createElement("figcaption")
        //     figcaption1.innerHTML = arr[i].title

        //     var figcaption2 = document.createElement("figcaption")
        //     figcaption2.innerHTML = arr[i].content


        //     content_down_text.appendChild(figure)
        //     figure.appendChild(img)
        //     figure.appendChild(iconfont)
        //     figure.appendChild(figcaption1)
        //     figure.appendChild(figcaption2)
        //     // product_presentation.appendChild(content_down_text)
        // }

    </script>
    <script src="../js/index.js"></script>
</body>

</html>